<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>订单统计</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
</head>
<body>
<div class="container">
    <form class="form-contact" action="/app/order-analysis/" method="post">
        {% csrf_token %}
        {% if form.non_field_errors %}
            <p>
                {% for error in form.non_field_errors %}
                    <div class="text-error">{{ error|escape }}</div>
                {% endfor %}
            </p>
        {% endif %}
        <fieldset class="form-group">
            {#datetime_from#}
            <div class="col-md-5">
                {{ form.datetime_from.errors }}
                <label class="control-label"
                       for="{{ form.datetime_from.id_for_label }}">{{ form.datetime_from.label }}</label>
                <div class="input-group date datetimepicker">
                    <input type="text" class="form-control" name="{{ form.datetime_from.name }}"
                           id="id_{{ form.datetime_from.name }}" value="{{ form.datetime_from.value }}">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
                </div>
                <p class="help-text">{{ form.datetime_from.help_text }}</p>
            </div>
            {#datetime_to#}
            <div class="col-md-5">
                <label class="control-label"
                       for="{{ form.datetime_to.id_for_label }}">{{ form.datetime_to.label }}</label>
                <div class="input-group date datetimepicker">
                    <input type="text" class="form-control" name="{{ form.datetime_to.name }}"
                           id="{{ form.datetime_to.id_for_label }}" value="{{ form.datetime_to.value }}">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
                </div>
                <p class="help-text">{{ form.datetime_to.help_text }}</p>
            </div>

            <div class="col-md-5">
                <label class="control-label"
                       for="{{ form.order_status.id_for_label }}">{{ form.order_status.label }}</label>
                {{ form.order_status }}
                <p class="help-text">{{ form.order_status.help_text }}</p>
            </div>

            <div class="col-md-5">
                <label class="control-label" for="{{ form.area.id_for_label }}">{{ form.area.label }}</label>
                {{ form.area }}
                <p class="help-text">{{ form.area.help_text }}</p>
            </div>

            <div class="col-md-5">
                <label class="control-label" for="{{ form.sales.id_for_label }}">{{ form.sales.label }}</label>
                {{ form.sales }}
                <p class="help-text">{{ form.sales.help_text }}</p>
            </div>

            <div class="col-md-5">
                <label class="control-label" for="{{ form.user.id_for_label }}">{{ form.user.label }}</label>
                {{ form.user }}
                <p class="help-text">{{ form.user.help_text }}</p>
            </div>
        </fieldset>
        <div class="form-actions">
            <input type="submit" class="btn btn-primary" value="提交">
        </div>

    </form>
</div>

<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.18.1/locale/zh-cn.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.datetimepicker').datetimepicker({
            locale: 'zh-CN',
            format: 'YYYY-MM-DD HH:mm',
            sideBySide: true
        });
    });
</script>
</body>